﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TagPage.aspx.cs" Inherits="WebSiteApplication.TagPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>带ID的选择框</title>
    <link href="Styles/bui.css" rel="stylesheet" />
    <link href="Styles/dpl.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="Scripts/sea.js"></script>
    <script type="text/javascript" src="Scripts/config.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>
            换行</h2>
        <div id="s1">
            <input type="hidden" id="hide" value="a:选项1" name="hide" />
        </div>
        <!-- script start -->
        <script type="text/javascript">
            BUI.use('bui/select', function (Select) {

                var items = [
          { text: '选项1', id: 'a' },
          { text: '选项2', id: 'b' },
          { text: '选项3', id: 'c' },
          { text: '选项4', id: 'd' },
        ],
        select = new Select.Combox({
            render: '#s1',
            showTag: true,
            limit: 3, //限制最多3个
            width: 500,
            valueField: '#hide', //显示tag的Combox必须存在valueField
            items: items,
            forbitInput: true, //只能从列表中选择，输入无效,一般用于suggest中
            tagFormatter: function (value) { //将id : text中的id去掉
                var arr = value.split(':');

                return arr[1]; //用户输入
            },
            list: { //自定义列表
                textGetter: function (item) {
                    return item.id + ':' + item.text;
                },
                idField: 'id' //默认是value
            }
        });
                select.render();


            });
   
        </script>
        <!-- script end -->
    </div>
    </form>
</body>
</html>
